<template>
    <div class="login-container">
      <div class="logo">
        <img src="" alt="滴团logo" />
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" class="form" placeholder="请输入用户名"/>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" class="form" placeholder="请输入密码"/>
      </div>
      <div class="button-group">
        <button class="login-button" @click="ioginltme">登录</button>
        <button class="register-button" @click="login()">注册</button>
      </div>
    </div>
  </template>

  <script setup lang="ts">
    import { useRouter } from 'vue-router'
    import { reactive,toRefs } from 'vue'
    const router = useRouter()
  function login() {
    router.push('./register')
  }

  let data = reactive({
      username: '',
      password: '',
    });

    const { username, password } ={ ...toRefs(data)};

    // 登录方法
    function ioginltme() {
        if(localStorage.userInfo){
            const u = JSON.parse(localStorage.userInfo)
            if(u['username'] == username.value) {
                if(u['password'] == password.value) {
                    alert('登录成功')
                    localStorage.setItem('isLogin', '1')
                    router.push('/')
                }else{
                    alert('密码错误')
                }
            }else{
                alert('用户名或密码错误')
            }
        }else{
            alert('用户不存在')
            router.push('/register')
        }
    }
</script>
  
  <style scoped>
  /* 通用样式 */
  .login-container {
    width: 70%;
    max-width: 350px;
    margin: 10vh auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    box-sizing: border-box;

  }
  .form {
        width: 20vw;
        height: 10vw;
    }
  
  .logo {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
    font-size: 10vw;

  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
  }
  
  .form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
    /* width: 30vw;
    height: 15vw;
    font-size: 4vw; */
  }
  
  .login-button,
  .register-button {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .login-button {
    background-color: #007bff;
    color: #fff;
  }
  
  .login-button:hover {
    background-color: #0056b3;
  }
  
  .register-button {
    background-color: #6c757d;
    color: #fff;
  }
  
  .register-button:hover {
    background-color: #545b62;
  }
  
  /* 小屏幕设备样式调整 */
  @media (max-width: 480px) {
    .login-container {
      width: 95%;
      margin: 5vh auto;
      padding: 15px;
    }
  }
  </style>